<%@ Page Language="C#" MasterPageFile="~/Minimal.master" AutoEventWireup="true" CodeFile="CreatePoll.aspx.cs"
    Inherits="CreatePoll" Title="Create Poll" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="Server">

    <script language="javascript" type="text/javascript">
// <!CDATA[

var detailedItemNumber = 0;
var lboxCancelled = false;

function createPollButton_onclick() {
    document.forms(0).submit();
}

function lightboxCancelled()    {
    lboxCancelled = true;    
}

function addPollDescription()   {
    var lbox = new lightbox();
	lbox.closeCallBack = setPollDescOnClose;
    lbox.dynamicLoad('/box-CreatePoll-AddDesc.htm');    
}

// Poll Description
function setPollDescription(desc) {
    $('pollDescription').value = desc;
    lboxCancelled = false;
}
function setPollDescOnClose()   {
    if (lboxCancelled)  { return;   }
    $('pollDescArea').innerHTML = '<span class="grey">' + $F('pollDescription') + '</span>' +
        '<span class="linklessLink" onclick="editPollDescription();">' + 
                    ' [Edit]</span>';
}

function editPollDescription()  {
    var lbox = new lightbox();
	lbox.closeCallBack = setPollDescOnClose;
	lbox.dynamicLoad('/box-CreatePoll-EditDesc.htm');
}

//-- Poll Desc

function addItemsButton_onclick() {
    var pollItemsCount = $F('pollItemsCount');
    pollItemsCount++;
    
    /* Add hidden fields */
    var hiddenFieldsDiv = $('hiddenFields');
    var html = '<input id="itemDescription' + pollItemsCount + '" name="itemDescription' + pollItemsCount + '" type="hidden" />';
    html += '<input id="itemLink' + pollItemsCount + '" name="itemLink' + pollItemsCount +  '" type="hidden" />';
    hiddenFieldsDiv.innerHTML += html;
    
    /* Add the visible items */
    var pollItemsDiv = $('pollItems');
    var itemDiv = document.createElement('div');
    var idAttr = document.createAttribute('id');
    idAttr.value = 'item' + pollItemsCount;
    itemDiv.setAttributeNode(idAttr)
    html = '<p>' + pollItemsCount + '. ' +
            '<input type="text" name="itemName' + pollItemsCount + '" id="itemName' + pollItemsCount + '" />' +                 
            '<span id="itemDetail' + pollItemsCount + '"><span class="linklessLink" onclick="addItemDetails(' + pollItemsCount + ');"> ' + 
            'Add Description</span></span></p>';
    itemDiv.innerHTML = html;
    pollItemsDiv.appendChild(itemDiv);
    $("pollItemsCount").value = pollItemsCount;
}

function clearDetailedItemNumber()  {
    detailedItemNumber = 0;
}

function addItemDetails(num)  {
    detailedItemNumber = num;
    var lbox = new lightbox();
	lbox.closeCallBack = setItemDescOnClose;
    lbox.dynamicLoad('/box-CreatePoll-AddItemDesc.htm');
}

//called when AddItemDesc is closed.
function setItemDetails(itemDesc, link) {
    if (detailedItemNumber == 0)
    {
        alert('An error occured, and the item details could not be added.');
        return;
    }
    lboxCancelled = false;
    $('itemDescription' + detailedItemNumber).value = itemDesc;
    $('itemLink' + detailedItemNumber).value = link;
}

function setItemDescOnClose() {
    if (lboxCancelled)  { return;   }
    $('itemDetail' + detailedItemNumber).innerHTML = '<span class="grey">' + $F('itemDescription' + detailedItemNumber) + ' </span>' +
        '<span class="linklessLink" onclick="editItemDetails(' + detailedItemNumber + ');">[Edit]</span>';    
}

function editItemDetails(num)  {
    detailedItemNumber = num;
    var lbox = new lightbox();
	lbox.closeCallBack = setItemDescOnClose;
	lbox.dynamicLoad('/box-CreatePoll-EditItemDesc.htm');
}

function inputsValid(catBoxId)
{
    if ($F(catBoxId) == "-1")
    {
        alert('Select a Category for the Poll (in Step 3) to proceed.');        
        return false;
    }
    return true;
}

// ]]>
    </script>

    <div id="hiddenFields">
        <input id="pollDescription" name="pollDescription" type="hidden" />
        <input id="itemDescription1" name="itemDescription1" type="hidden" />
        <input id="itemDescription2" name="itemDescription2" type="hidden" />
        <input id="itemDescription3" name="itemDescription3" type="hidden" />
        <input id="itemLink1" name="itemLink1" type="hidden" />
        <input id="itemLink2" name="itemLink2" type="hidden" />
        <input id="itemLink3" name="itemLink3" type="hidden" />
        <input id="pollItemsCount" type="hidden" value="3" name="pollItemsCount" />
    </div>
    <!--	STEP 1	-->
    <div>
        <p class="mediumText">
            <a href="Default.aspx">Home</a> > Create Poll
        </p>
    </div>
    <div class="createPoll-Step">
        <div class="stepNumbers">
            <div class="txtStep">
                STEP</div>
            <div class="stepNumber">
                1</div>
        </div>
        <div class="stepContent">
            <h3>
                Give a short title for the Poll
            </h3>
            <p>
                <input name="pollTitle" type="text" value="" size="60" maxlength="60" id="pollTitle" />
                (Maximum 50 chars)
                <br />
                <span class="smallText">eg: <em>The Best Cities in the World</em>, or <em>Scariest Horror
                    Movies</em></span></p>
            <p id="pollDescArea">
                If you want, you can also <span class="linklessLink" onclick="addPollDescription();">Add a Description</span>
            </p>
        </div>
    </div>
    <!--	STEP 2	-->
    <div class="createPoll-Step">
        <div class="stepNumbers">
            <div class="txtStep">
                STEP</div>
            <div class="stepNumber">
                2</div>
        </div>
        <div class="stepContent">
            <h3>
                Add Some Items to the Poll
            </h3>
            <div id="pollItems">
                <div id="item1">
                    <p>
                        1.
                        <input type="text" name="itemName1" id="itemName1" />
                        <span id="itemDetail1"><span class="linklessLink" onclick="addItemDetails(1);">
                            Add Description</span></span></p>
                </div>
                <div id="item2">
                    <p>
                        2.
                        <input type="text" name="itemName2" id="itemName2" />
                        <span id="itemDetail2"><span class="linklessLink" onclick="addItemDetails(2);">
                            Add Description</span></span></p>
                </div>
                <div id="item3">
                    <p>
                        3.
                        <input type="text" name="itemName3" id="itemName3" />
                        <span id="itemDetail3"><span class="linklessLink" onclick="addItemDetails(3);">Add
                            Description</span></span></p>
                </div>
            </div>
            <p>
                <input type="button" name="Submit" value="Add More Items" class="addItemsButton"
                    id="addItemsButton" onclick="return addItemsButton_onclick()" />
            </p>
        </div>
    </div>
    <!--	STEP 3	-->
    <div class="createPoll-Step">
        <div class="stepNumbers">
            <div class="txtStep">
                STEP</div>
            <div class="stepNumber">
                3</div>
        </div>
        <div class="stepContent">
            <h3>
                Select a Category for the Poll
            </h3>
            <p>
                Select Category&nbsp;
                <asp:DropDownList ID="categoryList" runat="server" Width="133px" DataTextField="Name"
                    DataValueField="Id">
                </asp:DropDownList></p>
        </div>
    </div>
    <!--	STEP 4	-->
    <div class="createPoll-Step">
        <div class="stepNumbers">
            <div class="txtStep">
                STEP</div>
            <div class="stepNumber">
                4</div>
        </div>
        <div class="stepContent">
            <h3>
                Other Settings
            </h3>
            <p>
                <input name="allowMultipleVotes" id="allowMultipleVotes" type="checkbox" checked="checked" />Allow
                Multiple Votes
            </p>
            <p>
                <input name="allowAddItems" id="allowAddItems" type="checkbox" checked="checked" />Allow
                users to add items
            </p>
        </div>
    </div>
    <!--	STEP 5	-->
    <div class="createPoll-Step">
        <div class="stepNumbers">
            <div class="txtStep">
                STEP</div>
            <div class="stepNumber">
                5</div>
        </div>
        <div class="stepContent">
            <h3>
                Finished!
            </h3>
            <p>
                &nbsp;<asp:Button ID="createPollButton" runat="server" OnClick="createPollButton_Click"
                    Text="Create Poll" Width="134px" /></p>
        </div>
    </div>
</asp:Content>
